<script setup>
import baseModel from "@/components/baseModel/baseModel.vue";
import { ref, reactive, onMounted, computed, nextTick } from "vue";
// 素材库
import ChooseMaterial from "@/views/shotstack/EditingCenter/modules/bottomSet/components/chooseMaterial.vue";

const emit = defineEmits(["update:item"]);

const formRef = ref(null)

const state = reactive({
    // 表单数据
    formState: {},
    materiallibraryShow: false
})

const openType = ref('')
// 素材库选择
const openMaterial = (type) => {
    openType.value = type
    state.materiallibraryShow = true
}

// 素材选择回调
const closeChooseMaterial = (data) => {
    if (data && data.material_content !== "") {
        state.formState[openType.value] = data.material_content
    }
    state.materiallibraryShow = false;
}

const submit = () => {
    formRef.value && formRef.value.validate().then(() => {
        emit('update', state.formState)
        nextTick(() => {
            state.formState = {}
            closeModal()
        })
    })
}

// base弹窗
const dialog = ref(null);
const showModal = (item) => {
    dialog.value.showModal();
    state.formState = JSON.parse(JSON.stringify(item))
};
const closeModal = () => {
    dialog.value.closeModal();
}

defineExpose({
    showModal,
    closeModal,
});
</script>

<template>
    <div>
        <baseModel ref="dialog" :contentWidth="'600px'" :maskClosable="false" :centered="false" :closable="true">
            <template #title>
                <div class="title_box">
                    <span class="title">编辑标题</span>
                </div>
            </template>
            <template #content>
                <div class="content">
                    <a-form :model="state.formState" name="formState" ref="formRef" class="form" :labelWrap="false"
                        layout="vertical" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">

                        <a-form-item label="主标题" name="title" :rules="[{ required: true, message: '请输入主标题' }]">
                            <div class="textarea_box">
                                <a-textarea v-model:value="state.formState.title" allowClear showCount :maxlength="150"
                                    style="resize:none" :auto-size="{
                                        minRows: 3,
                                        maxRows: 3,
                                    }">
                                </a-textarea> <a-button class="btn" style="" type="link" size="small"
                                    @click.stop="openMaterial('title')">
                                    文案导入
                                </a-button>
                            </div>
                        </a-form-item>

                        <a-form-item label="副标题" name="subtitle">
                            <div class="textarea_box">
                                <a-textarea v-model:value="state.formState.subtitle" allowClear showCount
                                    :maxlength="150" style="resize:none" :auto-size="{
                                        minRows: 3,
                                        maxRows: 3,
                                    }">
                                </a-textarea> <a-button class="btn" style="" type="link" size="small"
                                    @click.stop="openMaterial('subtitle')">
                                    文案导入
                                </a-button>
                            </div>
                        </a-form-item>

                    </a-form>
                </div>
            </template>
            <template #footer>
                <div class="bottom">
                    <a-button @click="closeModal" type="">取消</a-button>
                    <a-button @click="submit" type="primary">确定</a-button>
                </div>
            </template>
        </baseModel>

        <ChooseMaterial :isClip="true" material_type="text" :multiple="true" :visible="state.materiallibraryShow"
            @close="closeChooseMaterial($event, 'material_type')" />
    </div>
</template>



<style lang="less" scoped>
@fontColor: #1c1f23;

.title_box {
    display: flex;
    flex-direction: column;

    .title {
        font-size: 14px;
        font-weight: 600;
    }

    .tips {
        font-size: 12px;
        color: #aaaaaa;
        margin-top: 10px;
    }
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;

    .form {
        width: 100%;
    }

    // textarea 文案导入布局
    .textarea_box {
        position: relative;
        width: 100%;

        .btn {
            opacity: 0;
            transition: all .3s;
            position: absolute;
            right: 35px;
            top: -23px;
            width: 20px;
            font-size: 12px;
        }

        &:hover {
            .btn {
                opacity: 1;
            }

        }
    }
}



.bottom {
    // display: flex;
    // justify-content: center;
}
</style>